<template>
  <div>
    <div class="content">
      <div class="header">
        <!-- 修改表单区域 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="搜索类型" style="width: 200px">
            <el-select
              v-model="formInline._key_type"
              placeholder="请选择"
              style="width: 200px"
              @change="getselect1()"
            >
              <el-option
                v-for="item in searchselectdata"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="创建时间">
						<el-date-picker v-model="formInline._create_time" type="datetimerange" range-separator="To"
							start-placeholder="Start date" end-placeholder="End date" />
					</el-form-item> -->
          <el-form-item label="搜索关键字">
            <el-input
              v-model="formInline._key_word"
              placeholder="请输入关键字"
              clearable
            />
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input
              v-model="formInline.user_id"
              placeholder="请输入用户ID"
              clearable
            />
          </el-form-item>
          <el-form-item label="订单状态" style="width: 200px" v-show="!heShow">
            <el-select
              v-model="formInline._status"
              placeholder="请选择订单状态"
              style="width: 200px"
              @change="getselect2()"
            >
              <el-option
                v-for="item in orderstatuslist"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品类型" v-show="!heShow">
            <el-select
              v-model="formInline._goods_type"
              placeholder="请选择商品类型"
              style="width: 200px"
              @change="getselect3()"
            >
              <el-option
                v-for="item in goodstypelist"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="下单来源" v-show="!heShow">
            <el-select
              v-model="formInline._goods_from"
              placeholder="请选择下单来源"
              style="width: 200px"
              @change="getselect4()"
            >
              <el-option
                v-for="item in dockinglist"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="供应商编号" v-show="!heShow">
            <el-input
              v-model="formInline.supplier_id"
              placeholder="请输入供应商编号"
              clearable
            />
          </el-form-item>
          <el-form-item label="渠道" v-show="!heShow">
            <el-select
              v-model="formInline.docking_id"
              placeholder="请选择渠道"
              style="width: 200px"
              @change="getselect5()"
            >
              <el-option
                v-for="item in orderfrom"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="成本价" v-show="!heShow">
            <el-input
              v-model="formInline.cost_price"
              placeholder="请输入成本价"
              clearable
            />
          </el-form-item>
          <el-form-item label="销售单价" v-show="!heShow">
            <el-input
              v-model="formInline.price"
              placeholder="请输入销售单价"
              clearable
            />
          </el-form-item>

          <el-form-item label="订单时间范围" v-show="!heShow">
            <el-date-picker
              v-model="ranges"
              type="daterange"
              range-separator="To"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleChange"
              ref="datePicker"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitSee">查询</el-button>
            <el-button type="primary" plain @click="onSubmit">重置</el-button>
            <span class="he" v-show="!heShow" @click="btnHe2">
              合并
              <el-icon><ArrowUp /></el-icon>
            </span>
            <span class="he" v-show="heShow" @click="btnHe">
              展开
              <el-icon><ArrowDown /></el-icon>
            </span>
          </el-form-item>
        </el-form>
        <div class="headers">
          <div
            class="header-name"
            v-for="(item, index) in tabDate"
            :key="index"
            :class="{ names: names == index }"
            @click="btnName(index,item.indexs)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="area">
        <div style="border-bottom: 1px solid #3333; width: 97%; margin: 0 auto">
          <div class="header-area">
            <div
              class="tab-name"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ tabname: tabname == index }"
              @click="btnTable(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="tab-header" style="margin-top: 20px">
          <div class="tabs">
            <el-button type="danger" @click="addOpen"
              >批量删除({{ tabList[0].name }})</el-button
            >
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary">处理订单(0)</el-button>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item disabled>批量处理</el-dropdown-item>
                  <el-dropdown-item disabled>批量撤单</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary">批量补单(0)</el-button>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item disabled>渠道订单</el-dropdown-item>
                  <el-dropdown-item disabled>支付订单</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-button type="primary">批量同步回调(0)</el-button>
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item disabled>同步渠道订单</el-dropdown-item>
                  <el-dropdown-item disabled>回调AP订单</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="tabs">
            <el-button type="primary">导出订单</el-button>
          </div>
          <div class="tabs">
            <el-button type="primary">复制下单参数</el-button>
          </div>
        </div>

        <div class="table-area">
          <el-table
            border
            :data="dataList"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />

            <el-table-column
              prop="status"
              align="center"
              label="订单状态"
              #default="scope"
              width="100"
            >
              <div
                class="table-name"
                v-if="scope.row.status == '交易成功'"
                @click="btnSee(scope.row, 1)"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="table-name"
                style="background-color: #c3c3c3"
                @click="btnSee(scope.row, 1)"
                v-if="scope.row.status == '退款订单'"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="table-name"
                style="background-color: #5c5c5c"
                @click="btnSee(scope.row, 1)"
                v-if="scope.row.status == '未付款'"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="table-name"
                style="background-color: red"
                v-if="scope.row.status == '等待处理'"
                @click="btnSee(scope.row, 1)"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="table-name"
                style="background-color: #5c5c5c"
                v-if="scope.row.status == '交易失败'"
                @click="btnSee(scope.row, 1)"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="table-name"
                style="background-color: #1890ff"
                v-if="scope.row.status == '正在处理'"
                @click="btnSee(scope.row,1)"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="table-name"
                style="background-color: #a9a9a9"
                v-if="scope.row.status == '已成功退款'"
                @click="btnSee(scope.row,1)"
              >
                {{ scope.row.status }}
              </div>
            </el-table-column>
            <el-table-column
              prop="ordersn"
              align="center"
              label="订单号"
              #default="scope"
              width="260"
            >
              <div style="color: #1890ff; cursor: pointer">
                <span @click="btnSee(scope.row, 0)">
                  {{ scope.row.ordersn }}
                </span>
                <span class="iconss" @click="btnOrdersn(scope.row.ordersn)"
                  ><el-icon> <CopyDocument /> </el-icon
                ></span>
              </div>
            </el-table-column>
            <el-table-column
              prop="goods_name"
              align="left"
              label="商品名称"
              #default="scope"
              width="300"
            >
              <div style="display: flex; font-size: 12px">
                <div>
                  <img
                    style="cursor: pointer"
                    @click="openImagePreview(scope.row.goods_attment_face_id)"
                    v-if="scope.row.goods_attment_face_id"
                    class="imgs"
                    :src="scope.row.goods_attment_face_id"
                    alt=""
                  />

                  <el-icon
                    class="icons"
                    v-if="!scope.row.goods_attment_face_id"
                    :size="30"
                    :color="color"
                  >
                    <PictureFilled />
                  </el-icon>
                </div>
                <div style="margin-left: 6px">
                  <div style="color: #1890ff; display: flex; font-size: 14px">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="scope.row.goods_name"
                      placement="top-start"
                    >
                      <div
                        style="
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          width: 200px;
                        "
                      >
                        {{ scope.row.goods_name }}
                      </div>
                    </el-tooltip>
                  </div>
                  <div style="display: flex; margin-top: 9px">
                    <div
                      class="kami"
                      v-if="scope.row.goods_type == '充值商品'"
                      style="background-color: #e8f4ff; color: #1890ff"
                    >
                      {{ scope.row.goods_type }}
                    </div>
                    <div
                      class="kami"
                      style="background-color: #e7faf0; color: #13ce66"
                      v-if="scope.row.goods_type == '卡密商品'"
                    >
                      {{ scope.row.goods_type }}
                    </div>
                    <div
                      class="kami"
                      v-if="scope.row.goods_type == '实物商品'"
                      style="background-color: #fff8e6; color: #ffba00"
                    >
                      {{ scope.row.goods_type }}
                    </div>
                    <div
                      class="kami"
                      v-if="scope.row.goods_type == '29商品'"
                      style="background-color: #feb69d; color: red"
                    >
                      {{ scope.row.goods_type }}
                    </div>
                    <div
                      class="ordername"
                      v-if="scope.row._status_text == '未支付'"
                    >
                      {{ scope.row._status_text }}
                    </div>
                    <div
                      class="ordername"
                      style="color: red; border: 1px solid red"
                      v-if="scope.row._status_text == '取消交易'"
                    >
                      {{ scope.row._status_text }}
                    </div>
                    <div
                      class="ordername"
                      style="color: #13ce66; border: 1px solid #13ce66"
                      v-if="scope.row._status_text == '交易成功'"
                    >
                      {{ scope.row._status_text }}
                    </div>
                    <div
                      class="ordername"
                      style="color: #ffba00; border: 1px solid #ffba00"
                      v-if="scope.row._status_text == '正在处理'"
                    >
                      {{ scope.row._status_text }}
                    </div>
                    <div class="unbers">数量x{{ scope.row.quantity }}</div>
                  </div>
                </div>
              </div>
            </el-table-column>
            <!-- 	<el-table-column prop="name3" align="center" label="下单参数" width="100" /> -->
            <el-table-column align="center" label="充值信息" width="180">
              <template #default="scope">
                <!-- 或者用标签方式显示 -->

                <div style="display: flex">
                
                  <div class="info-area" >
                    <div
                      v-for="(item, idx) in scope.row.recharge_info"
                      :key="idx"
                      type="info"
                      style="margin: 0 3px 3px 0"
                        v-show="item.string_type == 'text'"
                    >
                      <el-tooltip
                    
                        class="box-item"
                        effect="dark"
                        :content="getFullInfoText(scope.row.recharge_info)"
                        placement="top-start"
                      >
                        <div class="info-area2" v-show="item.string_type == 'text'">
                          {{ item.value }}
                        </div>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="tutu">
                     <div v-for="(item,index) in scope.row.recharge_info" 
                     :key="index">
                       <div v-show="item.string_type == 'img' " >
                        <img @click="btnImg(item.value)" style="width: 50px;height: 50px;"  :src="item.value" alt="">
                       </div>
                     </div>
                  </div>
                  <div>
                    
                    <span
                      v-if="scope.row.recharge_info.length > 1"
                      @click="btnOrdersn4(scope.row.recharge_info)"
                      style="position: relative; top: 2px; cursor: pointer"
                      ><el-icon> <CopyDocument /> </el-icon
                    ></span>
                    
                  </div>
                 
                </div>
               
              </template>
            </el-table-column>

            <el-table-column
              prop="uid"
              align="center"
              label="下单用户"
              width="100"
              #default="scope"
            >
              <div style="color: #46a6ff">{{ scope.row.uid }}</div>
            </el-table-column>
            <el-table-column
              label="下单时间"
              align="center"
              #default="scope"
              width="180"
            >
              <div style="display: flex">创：{{ scope.row._create_time }}</div>
            </el-table-column>
            <el-table-column
              label="处理时间"
              align="center"
              #default="scope"
              width="200"
            >
              <div style="display: flex">更：{{ scope.row.update_time }}</div>
              <div
                style="display: flex"
                :class="{ timeShow: scope.row.finish_time == '-' }"
              >
                耗：{{ scope.row.finish_time }}
              </div>
            </el-table-column>
            <el-table-column align="center" prop="total_price" label="销售价" />
            <el-table-column
              align="center"
              prop="purchase_price"
              label="成本价"
            />
            <el-table-column
              align="center"
              prop="net_profit_price"
              label="利润"
            />

            <el-table-column
              align="center"
              prop="net_profit_price"
              label="真实成本利润"
              width="120"
            />

            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              min-width="180"
            >
              <template #default="scope">
                <div
                  :style="
                    isMobile ? 'display: flex; flex-direction: column;' : ''
                  "
                >
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    @click="btnSee(scope.row, 0)"
                    style="margin-bottom: 5px"
                    >查看详情</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footers">
          <div class="footerss">
            <div style="flex: 1">
              <div style="margin-top: 12px">本页统计数据</div>
              <div style="margin-top: 6px">
                合计：销售价：<span style="color: red">30537</span>元 利润:
                <span style="color: red">10026.02</span>元 真实成本:
                <span style="color: red">10350.52</span> 元 真实成本利润
                <span style="color: red"> 107.48</span>元
              </div>
            </div>
            <div style="flex: 1">
              <div style="margin-top: 12px">全部统计数据</div>
              <div style="margin-top: 6px">
                合计：销售价：<span style="color: red">35505.6600元</span>元
                利润: <span style="color: red">23069.92000</span>元 真实成本:
                <span style="color: red">11326.6500</span> 元 真实成本利润
                <span style="color: red"> 11902.1236</span>元
              </div>
            </div>
          </div>
        </div>
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
      </div>
    </div>

    <!-- 详情 -->
    <el-drawer v-model="drawer" :size="'60vw'" :with-header="false">
      <div class="contents-title">
        <div>订单信息</div>
        <div><el-button type="primary">订单处理</el-button></div>
      </div>
      <div class="img-content">
        <div class="img-left">
          <div>
            <img
              class="imgsleft"
              v-if="orderObj.goods_attment_face_id"
              :src="orderObj.goods_attment_face_id"
              alt=""
            />
            <el-icon
              class="icons2"
              v-if="!orderObj.goods_attment_face_id"
              :size="50"
              :color="color"
            >
              <PictureFilled />
            </el-icon>
          </div>
        </div>
        <div class="right-name">
          <div>【{{ orderObj.goods_name }}】{{ orderObj.id }}</div>
          <div class="bianhao">
            订单编号： {{ orderObj.ordersn }}
            <span
              @click="btnOrdersn2(orderObj.ordersn)"
              style="position: relative; top: 2px; cursor: pointer"
              ><el-icon> <CopyDocument /> </el-icon
            ></span>
          </div>
        </div>
      </div>
      <div class="types">
        <div class="type-name">
          <div>订单状态</div>
          <div class="quxiao">
            <div class="table-name" v-if="orderObj.status == '交易成功'">
              {{ orderObj.status }}
            </div>
            <div
              class="table-name"
              style="background-color: #5c5c5c"
              v-if="orderObj.status == '未付款'"
            >
              {{ orderObj.status }}
            </div>
            <div
              class="table-name"
              style="background-color: red"
              v-if="orderObj.status == '等待处理'"
            >
              {{ orderObj.status }}
            </div>
            <div
              class="table-name"
              style="background-color: #5c5c5c"
              v-if="orderObj.status == '交易失败'"
            >
              {{ orderObj.status }}
            </div>
            <div
              class="table-name"
              style="background-color: #1890ff"
              v-if="orderObj.status == '正在处理'"
            >
              {{ orderObj.status }}
            </div>
            <div
              class="table-name"
              style="background-color: #a9a9a9"
              v-if="orderObj.status == '已成功退款'"
            >
              {{ orderObj.status }}
            </div>
          </div>
        </div>
        <div class="type-name">
          <div>订单总价</div>
          <div style="margin-top: 8px">￥{{ orderObj.total_price }}</div>
        </div>
        <div class="type-name">
          <div>实际支付</div>
          <div style="margin-top: 8px">￥{{ orderotherinfo.total_price }}</div>
        </div>
        <div class="type-name">
          <div>下单来源</div>
          <div style="margin-top: 8px">
            {{ orderotherinfo.payment_gateway || "" }}
          </div>
        </div>
      </div>
      <div class="areas">
        <div class="areas-header">
          <div class="area-tab">
            <div
              class="area-name"
              v-for="(item, index) in tabsList"
              :key="index"
              :class="{ activeTabs: activeTab == index }"
              @click="btnActive(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- 订单详情 -->
          <div class="area-tabs">
            <div v-show="activeTab == 0">
              <div class="order-detail">
                <div class="order-information" style="font-size: 14px">
                  <div class="shu"></div>
                  <span style="position: relative; left: 12px">支付信息</span>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      支付单号：
                      {{ orderotherinfo.order_sn }}
                      <span
                        @click="btnOrdersn3(orderotherinfo.order_sn)"
                        style="position: relative; top: 2px; cursor: pointer"
                        ><el-icon> <CopyDocument /> </el-icon
                      ></span>
                    </div>

                    <div class="orders-names">
                      支付金额：￥{{ orderotherinfo.total_price }}
                    </div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      支付类型：{{ orderotherinfo.payment_gateway || "" }}
                    </div>
                    <div class="orders-names" style="width: 360px">
                      手续费：{{ orderotherinfo.service_price }}
                    </div>
                    <div class="orders-names">
                      支付状态：{{ orderotherinfo.status }}
                    </div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      创建时间：{{ orderotherinfo.create_time }}
                    </div>
                    <div class="orders-names" style="width: 360px">
                      支付时间:{{ orderotherinfo.payment_time }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="order-detail">
                <div class="order-information" style="font-size: 14px">
                  <div class="shu"></div>
                  <span style="position: relative; left: 12px">购买信息</span>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      用户UID：<span style="color: #1890ff">
                        {{ orderObj.uid }}</span
                      >
                    </div>
                    <div class="orders-names" style="width: 360px">
                      用户名称：{{ orderObj.nickname }}
                    </div>
                    <div class="orders-names" style="width: 360px">
                      商品ID：<span style="color: #1890ff">{{
                        orderObj.goods_id
                      }}</span>
                    </div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      下单数量：{{ orderObj.quantity }}
                    </div>
                    <div class="orders-names" style="width: 360px">
                      商品单价：{{ orderObj.cost_value }}
                    </div>
                    <div class="orders-names" style="width: 360px">
                      购买域名：<span style="color: #1890ff">{{
                        orderotherinfo.host
                      }}</span>
                    </div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      购买IP：
                      <span
                        style="color: #1890ff; cursor: pointer"
                        @click="handleIpClick(orderObj.ip)"
                      >
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="orderObj.province + orderObj.city"
                          placement="top-start"
                        >
                          {{ orderObj.ip }}
                        </el-tooltip>

                        <!-- <a :href="'https://www.ip138.com/iplookup.php?ip=' + orderObj.ip">
													        {{ orderObj.ip }}
													    </a> -->
                      </span>
                    </div>
                    <div class="orders-names" style="width: 360px">
                      购买地址：
                      <span style="color: #1890ff">
                        <el-tooltip
                          class="box-item"
                          effect="dark"
                          :content="orderObj.user_agent"
                          placement="top-start"
                        >
                          {{ orderObj.province }}{{ orderObj.city }}
                        </el-tooltip>
                      </span>
                    </div>
                    <div class="orders-names" style="width: 360px">
                      订单备注：{{ orderObj.mark }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="order-detail" style="height: 110px">
                <div class="order-information">
                  <div class="shu"></div>
                  <span style="position: relative; left: 12px">订单信息</span>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names">
                    <div class="orders-names" style="width: 358px">
                      订单总价：{{ orderObj.total_price }}
                    </div>
                    <div class="orders-names" style="width: 358px">
                      订单成本：{{ orderObj.all_cost_value }}
                    </div>
                    <!-- <div class="orders-names">订单佣金：￥{{orderObj.net_profit_price}}</div> -->
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 358px">
                      创建时间：{{ orderObj.create_time }}
                    </div>
                    <div class="orders-names" style="width: 358px">
                      处理时间：{{ orderObj.update_time }}
                    </div>
                    <div class="orders-names" style="width: 358px">
                      平台利润：{{ orderObj.profit }}
                    </div>
                  </div>
                </div>
              </div>

              <div class="order-detail" style="height: 110px" v-if="tableData.length>0">
                <div class="order-information">
                  <div class="shu"></div>
                  <span style="position: relative; left: 12px">卡密信息</span>
                </div>
                <div style="margin-top: 12px" >
                    <el-table
                      :data="tableData"
                    style="width: 100%"
                    >
                      
                      <el-table-column
                        prop="card_no"
                        label="卡号"
                        width="235"
                          #default="scope"
                      >
                      <div style="color: #1890ff; cursor: pointer">
                <span @click="btnSee(scope.row, 0)">
                  {{ scope.row.card_no }}
                </span>
                <span v-show="scope.row.card_no" class="iconss" style="position: relative;left: 6px;"  @click="btnOrdersn(scope.row.card_no)"
                  ><el-icon> <CopyDocument /> </el-icon
                ></span>
              </div>
                      </el-table-column>
                      <el-table-column
                        prop="card_password"
                        label="卡密"
                        width="235"
                          #default="scope"
                      >
                      <div style="color: #1890ff; cursor: pointer">
                <span @click="btnSee(scope.row, 0)">
                  {{ scope.row.card_password }}
                </span>
                <span v-show="scope.row.card_password" class="iconss" style="position: relative;left: 6px;"  @click="btnOrdersn(scope.row.card_password)"
                  ><el-icon> <CopyDocument /> </el-icon
                ></span>
              </div>
                    </el-table-column>
                    
                      <el-table-column
                        prop="_end_time"
                        label="赠品/矩阵"
                        width="235"
                      />
                    </el-table>
                  </div>
              </div>




              <div
                class="order-detail"
                v-if="rechargeinfos && rechargeinfos.length"
              >
                <div class="order-information" style="font-size: 14px">
                  <div class="shu"></div>

                  <span style="position: relative; left: 12px">下单参数</span>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names" style="flex-wrap: wrap">
                    <div
                      class="orders-names"
                      style="width: 160px; margin-top: 12px"
                      v-for="(item, index) in rechargeinfos"
                      :key="index"
                    >
                  
                    <div v-show="item.string_type == 'text'">
                      {{ item.key }}：{{ item.value }}
                      <span
                      v-show="item.string_type == 'text'"
                        @click="btnOrdersn5(orderObj.ordersn)"
                        style="position: relative; top: 2px; cursor: pointer"
                        ><el-icon> <CopyDocument v-show="item.string_type == 'text'" /> </el-icon
                      ></span>
                    </div>
                    <div v-show="item.string_type == 'img'" style="width: 100px;">
                       <img style="height: 50px;width: 50px;" :src="item.value" alt="">
                    </div>
                    
                    </div>
                    <div
                      v-if="orderObj.recharge_hints"
                      style="margin-top: 12px"
                    >
                      充值返回:{{ orderObj.recharge_hints }}
                    </div>
                  </div>

                </div>
              </div>
              <div
                class="order-detail"
                style="height: 80px"
                v-if="orderObj.docking_id !== '0'"
              >
                <div
                  class="order-information"
                  style="display: flex; justify-content: space-between"
                >
                  <div style="font-size: 14px">
                    <span style="position: relative; left: 12px"
                      >第三方渠道</span
                    >
                  </div>
                  <div>
                    <span class="sanfang">停止补单</span>
                    <span class="sanfang">撤单补单</span>
                    <span class="sanfang">仅撤订单</span>
                    <span class="sanfang">渠道订单列表</span>
                    <span class="sanfang">同步订单</span>
                  </div>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names">
                    <div class="orders-names" style="width: 358px">
                      渠道名称：测试
                    </div>
                    <div class="orders-names" style="width: 358px">
                      渠道商品ID：278
                    </div>
                    <div class="orders-names" style="width: 358px">
                      渠道返回：2322
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 订单处理 -->
            <div v-show="activeTab == 1">
              <div class="zanwu" v-show="!zanwuShow">暂无操作</div>
              <div v-show="zanwuShow">
                <div class="active-order" style="top: 21px;">
                  <div class="order-titme">
                    <div style="" v-show="wuliuSelect">
                      <div style="margin-left: 12px">
                        <div>
                          <div class="shu2" style="top: 21px;"></div>
                          <div>发货物流:</div>
                          <div class="zhuangtai">
                            <el-select
                              v-model="form.address_company"
                              class="m-2"
                              placeholder="请选择"
                              
                            >
                              <el-option
                                v-for="item in selectDate"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                              />
                            </el-select>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="" v-show="wuliuSelect">
                      <div style="margin-left: 12px">
                        <div>
                          <div class="shu2"  style="top: 21px;"></div>
                          <div>物流单号:</div>
                          <div class="zhuangtai">
                            <el-input
                              style="width: 200px; margin-left: 12px"
                              v-model="form.address_ordersn"
                              placeholder="请输入物流单号"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                    <div style="" v-show="statusShow">
                      <div style="margin-left: 12px">
                        <div class="shu2"  style="top: 21px;"></div>
                        <div>处理方式：</div>
                        <div class="zhuangtai">
                          <el-radio-group
                            v-model="statusFang"
                            @change="getStatus"
                          >
                            <!-- 直接放置 el-radio -->
                            <el-radio :label="2">处理中</el-radio>
                            <el-radio :label="3">充值成功</el-radio>
                            <el-radio :label="4">取消充值</el-radio>
                          </el-radio-group>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div style="margin-left: 11px" v-show="startProgress">
                  <div class="shu2"></div>
                  <div style="position: relative; top: 3px; width: 100px">
                    处理进度：
                  </div>
                  <div class="zhuangtai">
                    <div style="display: flex">
                      <div style="margin-left: 12px">
                        <div>
                          <span>开始:</span
                          ><el-input
                            class="inputs"
                            v-model="form.start_progress"
                          />
                        </div>
                      </div>
                    </div>
                    <div style="display: flex; margin-bottom: 20px">
                      <div style="margin-left: 12px">
                        <div>
                          <span>目标:</span>
                          <el-input
                            class="inputs"
                            v-model="form.target_progress"
                          />
                        </div>
                      </div>
                    </div>
                    <div style="display: flex">
                      <div style="margin-left: 12px">
                        <div>
                          <span>当前:</span>
                          <el-input
                            class="inputs"
                            v-model="form.current_progress"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                  <div style="margin-left: 10px" v-show="statusShow">
                    <div class="shu2"  style="top: 21px;"></div>
                    <div>充值返回信息:</div>
                    <div class="zhuangtai">
                      <el-input
                        class="inputs"
                        style="width: 280px; margin-top: 12px;"
                        v-model="form.recharge_hints"
                         autosize
                         type="textarea"
                      />
                    </div>
                  </div>
                </div>
             
                <div style="margin-left: 11px" v-show="checkboxShow">
                  <div class="shu2"  ></div>
                  <div style="position: relative; top: 3px; width: 100px">
                    订单状态
                  </div>
                  <div class="zhuangtai">
                    <div style="margin-left: 12px">
                      <div>
                        <el-checkbox
                          @change="getCheck(checked1)"
                          v-model="checked1"
                          >置为失败</el-checkbox
                        >
                        <span style="    position: relative;
    top: -3px;
    left: 12px;
    color: #333;">(仅变更订单状态，不涉及退款)</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="margin-left: 11px" v-show="inputShow">
                  <div class="shu2"></div>
                  <div style="position: relative; top: 3px; width: 140px">
                    退款方式：
                  </div>
                  <div class="zhuangtai">
                    <el-radio-group v-model="backmoney_type" @change="getBackmoneytype(backmoney_type)">
                      <el-radio :label="1"
                        >供货商承担退款（中间经销商利润、手续费不退回，均由供货商承担.）</el-radio
                      >
                      <el-radio :label="2"
                        >逐层退款（中间经销商利润、手续费逐一退回，会造成中间商赚取的差价被退回。）</el-radio
                      >
                    </el-radio-group>
                  </div>
                </div>
                <div style="margin-left: 11px" v-show="inputShow">
                  <div class="shu2"></div>
                  <div style="position: relative; top: 3px; width: 100px">
                    退款类型：
                  </div>
                  <div class="zhuangtai">
                    <el-radio-group
                      v-model="order_style"
                      @change="getbackMoney(order_style)"
                    >
                      <el-radio :label="1">全退</el-radio>
                      <el-radio :label="2">部分退</el-radio>
                      <el-radio :label="4" :disabled="goodstypeNamesShow"
                        >按天退</el-radio
                      >
                      <el-radio :label="3" :disabled="disabledShow"
                        >按张退</el-radio
                      >
                    </el-radio-group>
                  </div>
                </div>
              
               
                <div style="font-size: 13px; margin-top: 10px" v-show="order_style ==4">
                  <span>按天退：</span>
                  <el-input style="width: 200px" v-model="form.money1" />
                </div>
                
                <div style="display: flex" >
                  <div style="margin-left: 12px; margin-top: 12px">
                    <div v-show="order_style==2">
                      <div>
                        <el-radio-group
                          v-model="form.backmoney_part"
                          @change="getbackMoney2(form.backmoney_part)"
                        >
                          <el-radio :label="1">按金额</el-radio>
                          <el-radio :label="2">按百分比</el-radio>
                        </el-radio-group>
                      </div>
                      <div
                        v-show="form.backmoney_part == 2"
                        style="font-size: 13px; margin-top: 10px"
                      >
                        <span>按百分比：</span>
                        <el-input style="width: 200px" v-model="form.money1" />
                        <span style="margin-left: 10px">%</span>
                      </div>
                      <div
                        v-show="form.backmoney_part == 1"
                        style="font-size: 13px; margin-top: 10px"
                      >
                        <span>按金额：</span>
                        <el-input style="width: 200px" v-model="form.money1" />
                        <span style="margin-left: 10px"></span>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="order-detail"
                  style="border: none"
                  v-show="tableDataShow"
                >
                  <div
                    class="order-information"
                    style="display: flex; justify-content: space-between"
                  >
                    <div style="font-size: 14px" v-if="disabledShow2">
                      <div class="shu"></div>
                      <span style="position: relative; left: 12px"
                        >卡密列表</span
                      >
                    </div>
                  </div>
                  <div style="margin-top: 12px" v-if="disabledShow2">
                    <el-table
                      :data="tableData"
                      @selection-change="getKami"
                      style="width: 100%"
                    >
                      <el-table-column type="selection" width="55" />
                      <el-table-column
                        prop="card_no"
                        label="卡号"
                        width="235"
                      />
                      <el-table-column
                        prop="card_password"
                        label="卡密"
                        width="235"
                          
                      >
                  
                      </el-table-column>
                      <el-table-column
                        prop="_end_time"
                        label="赠品/矩阵"
                        width="235"
                      />
                    </el-table>
                  </div>
                </div>
                <div
                  style="
                    text-align: center;
                    margin-top: 23px;
                    padding-bottom: 20px;
                  "
                >
                  <el-button type="primary" @click="btnOk">确定</el-button>
                </div>
              </div>
            </div>

            <!-- 商品信息 -->
            <div v-show="activeTab == 2">333</div>
            <!-- 金额明细 -->
            <div v-show="activeTab == 3" style="margin-top: 24px">
              <el-table :data="tableData3" style="width: 100%">
                <el-table-column prop="uid" label="客户" />
                <el-table-column prop="trade_type" label="交易类型" />
                <el-table-column prop="_change_type_text" label="变动类型" />
                <el-table-column prop="_trade_type_text" label="交易金额" />
                <el-table-column prop="before" label="变化前(元)" />
                <el-table-column prop="after" label="变化后(元)" />
                <el-table-column prop="create_time" label="交易日期" />
              </el-table>
            </div>
            <!-- 退款明细 -->
            <div v-show="activeTab == 4" style="margin-top: 24px">
              <el-table :data="tableData4" style="width: 100%">
                <el-table-column prop="money" label="退款金额" />
                <el-table-column prop="oper" label="处理人" />
                <el-table-column prop="_create_time" label="处理时间" />
              </el-table>
            </div>
            <!-- 销售明细 -->
            <div v-show="activeTab == 5" style="margin-top: 24px">
              <el-table :data="tableData5" style="width: 100%">
                <el-table-column prop="total_price" label="销售额" />
                <el-table-column prop="extract_price" label="销售提成" />
                <el-table-column prop="rate_price" label="手续费" />
                <el-table-column prop="admission_price" label="入账金额" />
                <el-table-column prop="refund_price" label="退款额" />
                <el-table-column prop="total_purchase_price" label="进货额" />
              </el-table>
            </div>
            <!-- 商务资金明细 -->
            <div v-show="activeTab == 6" style="margin-top: 24px">
              <el-table :data="tableData6" style="width: 100%">
                <el-table-column prop="_sup_name" label="商户" />
                <el-table-column prop="_trade_type_text" label="交易类型" />
                <el-table-column prop="_change_type_text" label="变动类型" />
                <el-table-column prop="money" label="交易金额" />
                <el-table-column prop="before" label="变化前(元)" />
                <el-table-column prop="after" label="变化后(元)" />
                <el-table-column prop="_create_time" label="交易日期" />
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 图片预览对话框 -->
    <div class="image-overlay">
      <el-dialog v-model="imgShow" :show-close="false" width="36%">
        <img style="width: 100%" :src="currentImage" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
  entityList,
  getDockSelectList,
  delOrder,
  changeOrder,
  orderStatusChangeBefore,
  orderSupMoneyDetail,
  orderAdmissionMon,
  orderRefundList,
  orderMemberMoney,
  getOrderCardInfo,
  getOrderList,
  getOrderDetail,
} from "~/base/api/order/orderList.ts";
import {
  PictureFilled,
  ArrowDown,
  CopyDocument,
  Picture,
  ArrowUp,
} from "@element-plus/icons-vue";
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
import axios from "axios";
import { Loading } from "@element-plus/icons-vue";
import {
  ElMessageBox,
  ElMessage,
  ElLoading,
  componentSizeMap,
} from "element-plus";
import { range } from "lodash-es";
import { select } from "radash";
const names = ref(0);
const heShow = ref(true);
const wuliuSelect = ref(false);
const statusShow = ref(false);
const startProgress = ref(false);
const checkboxShow = ref(false);
const inputShow = ref(false);
const valss = ref("");
const disabledShow = ref(false);
const disabledShow2 = ref(false);
const disabledShow3 = ref(false);
const zanwuShow = ref(true);
const imgShow = ref(false);
const goodstypeName = ref("");
const goodstypeNames = ref(false);
// 图片预览相关状态
const previewVisible = ref(false);
const currentImage = ref("");
const statuss = ref("");
const selectDate = ref([
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
]);
const drawer = ref(false);
const tabname = ref(0);

const activeTab = ref(1);
const tabsListAcitive = ref(0);
const tableData3 = ref([]);
const tableData4 = ref([]);
const tableData5 = ref([]);
const tableData6 = ref([]);
const rechargeinfos = ref([]);
const ordercardidShow = ref(false);
const tabsList = ref([
  {
    name: "订单详情",
  },
  {
    name: "订单处理",
  },
  {
    name: "商品信息",
  },
  {
    name: "金额明细",
  },
  {
    name: "退款明细",
  },
  {
    name: "销售明细",
  },
  {
    name: "商务资金明细",
  },
]);
const ordersn = ref("");
const tableData = ref([]);
const orderFor = ref({
  selectName: "",
});
const orderstatuslist = ref([]);
const searchselectdata = ref([]);
const goodstypeNamesShow = ref(false);
const tabslists = ref([]);
const tabslistss = ref([]);
const goodstypelist = ref([]);
const dockinglist = ref([]);
const ranges = ref([]);
const orderfrom = ref([]);
//下拉搜索
function getselect1() {
  getSetdocking();
}
function getselect2() {
  getSetdocking();
}
function getselect3() {
  getSetdocking();
}
function getselect4() {
  getSetdocking();
}
function getselect5() {
  getSetdocking();
}
function getKami(e) {
  console.log("这个获取的是什么", e, form.value.card_ids);
  let bobo = [];
  for (let item of e) {
    bobo.push(item.id);
  }
  console.log("测试波波是多少", bobo.join(","));
 order_card_ids.value = bobo.join(",");
}
//点击图片
function btnImg(e){
  imgShow.value=true
  currentImage.value = e
  console.log(e)
}
//获取时间
function handleChange(e) {
  console.log("eee", e);
  const year = e[0].getFullYear();
  const month = String(e[0].getMonth() + 1).padStart(2, "0"); // 月份从0开始需+1
  const day = String(e[0].getDate()).padStart(2, "0");

  const year2 = e[0].getFullYear();
  const month2 = String(e[0].getMonth() + 1).padStart(2, "0"); // 月份从0开始需+1
  const day2 = String(e[0].getDate()).padStart(2, "0");

  formInline._time_range = `${year}-${month}-${day}`;
  console.log("ddddd11111", formInline._time_range);
  formInline._end_time_range = `${year2}-${month2}-${day2}`;
  return `${year}-${month}-${day}`;
  getSetdocking();
}
//获取列表渲染数据
function getDockSelectLists() {
  getDockSelectList().then((res) => {
    console.log("列表下拉数据死啊选", res);
    searchselectdata.value = res.data.search_select_data;
    orderstatuslist.value = res.data.order_status_list;
    goodstypelist.value = res.data.goods_type_list;
    dockinglist.value = res.data.docking_list;
    orderfrom.value = res.data.order_from;
  });
}
//点击展开
function btnHe() {
  heShow.value = false;
}
function btnHe2() {
  heShow.value = true;
}
//下拉选择
function handleSelectionChange(e) {
  tabslists.value = e;
  tabslists.value = tabslists.value.map((res) => {
    return {
      id: res.id,
    };
  });
  console.log("eeee", tabslists.value);
  tabslistss.value = tabslists.value;
}
//批量删除
function addOpen() {
  console.log("tabslistss.value11", tabslistss.value);
  const result = tabslistss.value.map((item) => item.id).join(",");

  delOrder({ id: result }).then(() => {
    ElMessage.success("删除成功");
    //fetchData(); // 刷新列表
    getSetdocking();
  });
}
// 打开图片预览
const openImagePreview = (imageUrl) => {
  console.log("11111", imageUrl);
  currentImage.value = imageUrl;
  imgShow.value = true;
};

// 关闭图片预览
const closeImagePreview = () => {
  previewVisible.value = false;
};

// 更现代的复制函数（推荐）
async function btnOrdersn(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
// 更现代的复制函数（推荐）
async function btnOrdersn3(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
// 更现代的复制函数（推荐）
async function btnOrdersn4(e) {
  let cc = "";

  for (let item of e) {
    cc += item.value;
  }
  console.log("111111", cc);

  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(cc);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${cc}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${cc}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = cc;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
// 更现代的复制函数（推荐）
async function btnOrdersn2(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
//多选
function getCheck(e) {
  console.log(e)
  form.value.checked1=e
 
  if(e==true){
    checked1s.value=1
  }else if(e ==false){
    checked1s.value=0
  }
}
//处理方式
function getStatus(e) {
  form.value.status = e;
  console.log("处理方式", e);
  if (e == 2) {
    form.value.recharge_hints = "订单正在处理中，请耐心等待!";
    recharge_hints.value = "期待下次光临！";
  } else if (e == 3) {
    form.value.recharge_hints = "订单交易成功，期待下次光临!";
    recharge_hints.value = "订单正在处理中，请耐心等待!";
  } else {
    form.value.recharge_hints = "订单交易失败，感谢您的支持!";
    recharge_hints.value = "感谢您的支持!";
  }
}
// 更现代的复制函数（推荐）
async function btnOrdersn5(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
const orderObj = ref({});
const orderotherinfo = ref({});
const allfieldlist = ref([]);
const ids = ref("");
const typeName = ref(false);
const statusFang = ref(0);
const checked1=ref(true)
const backmoney_type=ref(2)
const order_style=ref(1)
const backmoney_part=ref(0)
const recharge_hints=ref("")
const form2 = ref({
  card_ids: "",
  backmoney_part: '',
  address_company: "",
  money1: "",
  checked1: "true",
  backmoney_type: 2,
  order_style: "1",
  current_progress: "",
  target_progress: "",
  recharge_hints: "",
  start_progress: "",
  status: 3, // 数字
  address_ordersn: "",
});
const form = ref({
  card_ids: "",
  backmoney_part: '',
  address_company: "",
  money1: "",
  checked1: "true",
  backmoney_type: "2",
  order_style: "1",
  current_progress: "",
  target_progress: "",
  recharge_hints: "",
  start_progress: "",
  status: 3, // 数字
  address_ordersn: "",
});
const inputList = ref([]);
const tabList = ref([
  {
    name: "所有订单(2622)",
  },
  // {
  // 	name: '平台订单(2622)'
  // },

  // {
  // 	name: '兑换订单(17)'
  // },
  // {
  // 	name: '平台订单(2622)'
  // },
  // {
  // 	name: '快速充值订单(0)'
  // }
]);
const checkIsMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};
//退款方式
function getbackMoney2(e) {
  form.value.backmoney_part = e;
  // backmoney_part.value=e
  form.value.money1 = "";
}
//退货方式选择
function getBackmoneytype(e) {
  console.log('e',e)
  form2.value.backmoney_type = e;

}
//选择退款类型
function getbackMoney(e) {
  form2.value.order_style=e
  form2.value.backmoney_part=e
  console.log("这是啥", e,form2.value.order_style);
  if (e == 1) {
    disabledShow2.value = false;
    typeName.value = false;
    goodstypeNames.value = false;
  } else if (e == 4) {
    disabledShow2.value = false;
    typeName.value = false;
    goodstypeNames.value = false;
  } else if (e == 2) {
    disabledShow2.value = false;
    typeName.value = true;
    goodstypeNames.value = false;
  } else if (e == 3) {
    disabledShow2.value = true;
    typeName.value = false;
    if (form.value.order_style == 3 && goodstypeName.value == 1) {
      goodstypeNames.value = true;
    }
  }
  console.log("退款类型", typeName.value);
}
const tableDataShow=ref(false)
const order_card_ids=ref("")
//详情tab切换
function btnActive(index) {
  console.log("eeee", index);
  activeTab.value = index;
  let parm = {
    id: ids.value,
    page: 99,
    limit: 1,
  };
  if (index == 1) {
    //获取卡密
    tableData.value=[]
    getOrderCardInfo(parm).then((res) => {
      console.log("获取开口", res);
      tableData.value = res.data.data;
      if(tableData.value){
        tableDataShow.value=true
      }
    });

    //订单处理界面渲染
    // orderStatusChangeBefore({ id:ids.value }).then((res) => {
    // 	console.log('处理结果', res)
    // 	selectDate.value = res.data.all_field_list
    // })
  } else if (index == 0) {
    //获取详情
    getOrderDetail({ id: ids.value }).then((res) => {
      console.log("获取详情11", res.data.order_refund.backmoney_type);
      form.value.status = res.data.order.status;
        form.value.backmoney_part = res.data.order_refund.backmoney_part
        form2.value.backmoney_part = res.data.order_refund.backmoney_part

        form.value.backmoney_type = res.data.order_refund.backmoney_type
        form2.value.backmoney_type = res.data.order_refund.backmoney_type
        console.log( "获取详情form.value.backmoney_type", form2.value.backmoney_type);
      statusFang.value = parseInt(res.data.order.status);
      if (res.data.order.validdate_value == 0) {
        goodstypeNamesShow.value = true;
      } else {
        goodstypeNamesShow.value = false;
      }
      //订单判断
      if (res.data.order.status == 1 || res.data.order.status == 2) {
        console.log("确定走这边了吗收到是的是的");
        if (res.data.order.goods_type == 3) {
          wuliuSelect.value = false;
          startProgress.value = false;
        } else {
          startProgress.value = true;
        }
      } else if (res.data.order.status == 5 || res.data.order.status == 3) {
        console.log("确定走这边了吗1111");
        startProgress.value = false;
        if (res.data.order.is_fail == 0) {
          checkboxShow.value = true;
        }
        if (  res.data.order.goods_type == 1 ) {
          console.log("确定走这边了吗22");
          disabledShow.value = false;
        } else {
          disabledShow.value = true;
        }
        inputShow.value = true;
        if (res.data.order.goods_type == 1 && form.backmoney_type == 3) {
          ordercardidShow.value = true;
        }
      }

      orderObj.value = {};
      ordersn.value = {};
      orderotherinfo.value = {};
      if (res.data.order.recharge_info == null) {
        rechargeinfos.value = [];
      } else {
        rechargeinfos.value = res.data.order.recharge_info;
      }
      console.log("获取数组", rechargeinfos.value);
      if (res.data.order) {
        orderObj.value = res.data.order;
        ordersn.value = res.data.order.ordersn;
      }
      if (res.data.order_other_info) {
        orderotherinfo.value = res.data.order_other_info;
        console.log("这是什么", orderotherinfo.value);
      }
      if (orderObj.value.goods_type == 1) {
        orderObj.value.goods_type = "卡密商品";
      } else if (orderObj.value.goods_type == 2) {
        orderObj.value.goods_type = "充值商品";
      } else if (orderObj.value.goods_type == 3) {
        orderObj.value.goods_type = "实物商品";
      }
      if (orderObj.value.status == 1) {
        orderObj.value.status = "正在处理";
      } else if (orderObj.value.status == 3) {
        orderObj.value.status = "交易成功";
      } else if (orderObj.value.status == 2) {
        orderObj.value.status = "正在处理";
      } else if (orderObj.value.status == 0) {
        orderObj.value.status = "等待支付";
      } else if (orderObj.value.status == 4) {
        orderObj.value.status = "交易失败";
      } else if (orderObj.value.status == 5) {
        orderObj.value.status = "已成功退款";
      }
    });
  } else if (index == 3) {
    //订单明细
    if (tableData3.value && tableData6.value.length > 0) {
      console.log("数据已存在，跳过API请求");
      return;
    } else {
      orderMemberMoney(parm).then((res) => {
        tableData3.value = res.data.data;
      });
    }
  } else if (index == 4) {
    //退款订单
    if (tableData4.value && tableData4.value.length > 0) {
      return;
    } else {
      orderRefundList(parm).then((res) => {
        console.log(res);
        if (res.data) {
          tableData4.value = res.data.data;
        }
      });
    }
  } else if (index == 5) {
    //销售明细
    if (tableData5.value && tableData5.value.length > 0) {
      return;
    } else {
      orderAdmissionMon(parm).then((res) => {
        tableData5.value = res.data.data;
      });
    }
  } else if (index == 6) {
    //订单金额
    if (tableData3.value && tableData3.value.length > 0) {
      return;
    } else {
      orderSupMoneyDetail(parm).then((res) => {
        tableData6.value = res.data.data;
      });
    }
  }
}
//订单处理下拉
function getSelect(e) {
  form.value.selectedValue = e;
}
//订单处理输入框
const changedValues = ref({});
const radioDate = ref([]);
function getinput(value, key, title) {
  console.log(`输入框变化 - ${title} (${key}): ${value}`);

  changedValues.value[key] = value;
}
watch(
  changedValues,
  (newVal) => {
    console.log("当前保存的对象:", newVal);
    form.value.start_progres = newVal;
  },
  { deep: true }
);

//订单单选

const radioSelections = ref({});

function handleRadioChange(selectedValue, groupKey, groupTitle, allOptions) {
  // 查找选中项对应的标题
  const selectedTitle =
    allOptions.find((option) => option.value === selectedValue)?.title ||
    "未知选项";

  // 将选择结果以 key:title 形式存储
  radioSelections.value[groupKey] = selectedTitle;

  // 可选的日志输出
  console.log(`单选框变化 - ${groupTitle} (${groupKey}): ${selectedTitle}`);
  let aa = `(${groupKey}): ${selectedTitle}`;

  radioDate.value.push(aa);
  console.log(radioDate.value.toString(","));
  form.value.input_list = radioDate.value.toString(",");
}

//订单复选
// 处理复选框变更
const formData = reactive({
  radioSelections: {}, // 存储单选结果 {key: title}
  checkboxSelections: {}, // 存储复选结果 {key: [title1, title2...]}
});
function handleCheckboxChange(selectedValues, groupKey, allOptions) {
  if (!Array.isArray(selectedValues)) return;

  // 将选中的值映射为标题数组
  const selectedTitles = selectedValues.map((value) => {
    const found = allOptions.find((opt) => opt.value === value);
    return found ? found.title : `未知选项(${value})`;
  });

  // 更新存储对象
  formData.checkboxSelections[groupKey] = selectedTitles;

  // 调试输出 (示例: {'hobbies': ['篮球', '读书']})
  console.log("复选框更新:", groupKey, selectedTitles);
  form.value.show_now_status_btn = selectedTitles;
}
const statusFangcc=ref('')
const checked1s=ref("1")
//订单处理确认
function btnOk() {
  //form.value.backmoney_part =order_style.value
 // form.value.backmoney_type=backmoney_type.value

  if (form.value.checked1 == "true") {
    form.value.checked1 = "is_fail";
  }
  form2.value.card_ids=form.value.card_ids
  // form2.value.backmoney_part=form.value.backmoney_part
  // form2.value.backmoney_part=form.value.backmoney_part
  form2.value.address_company=form.value.address_company
  form2.value.money1=form.value.money1
  form2.value.checked1=form.value.checked1
  // form2.value.backmoney_type=form.value.backmoney_type
  form2.value.current_progress=form.value.current_progress
  form2.value.target_progress=form.value.target_progress
  form2.value.recharge_hints=form.value.recharge_hints
  form2.value.start_progress=form.value.start_progress
  form2.value.status=form.value.status
  form2.value.address_ordersn=form.value.address_ordersn
  if(form2.value.status =='正在处理'){
    form2.value.status =1
  }else if(form2.value.status =='正在处理'){
    form2.value.status =2
  }else if(form2.value.status =='交易成功'){
    form2.value.status =3
  }else if(form2.value.status =='等待支付'){
    form2.value.status =0
  }else if(form2.value.status =='交易失败'){
    form2.value.status =4
  }else if(form2.value.status =='已成功退款'){
    form2.value.status =5
  }
if(statusFangcc.value !==3){
  if(statusFang.value == 3 || statusFang.value == 2 ){
    form2.value.backmoney_part=0
    form2.value.backmoney_type=0
  }
  console.log('走这里了吗')
}

if(order_card_ids.value ){
  form2.value.backmoney_part='3'
  let parm = {
    id: ids.value,
    is_fail:checked1s.value,
    ...form2.value,
    order_card_ids:order_card_ids.value
  };
    
  changeOrder(parm).then((res) => {
    drawer.value=false
    getSetdocking()
   console.log(res)
    if (res.code == 200) {
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }else{
      ElMessage({
        message: res.msg,
        type: "success",
      });  
    }
  }).catch((error)=>{
    ElMessage({
      message: error.msg, // 显示错误详情
      type: "error", // ❌ 用 error，不要用 success
    });

  });
}else{
  let parm = {
    id: ids.value,
    is_fail:checked1s.value,
    ...form2.value,
  };
    
  changeOrder(parm).then((res) => {
    drawer.value=false
    getSetdocking()
   console.log(res)
    if (res.code == 200) {
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }else{
      ElMessage({
        message: res.msg,
        type: "success",
      });  
    }
  }).catch((error)=>{
    ElMessage({
      message: error.msg, // 显示错误详情
      type: "error", // ❌ 用 error，不要用 success
    });

  });
}
}

//查看详情
function btnSee(e, index) {
  console.log("这是啥", e, index,);
  goodstypeNames.value=false
  order_style.value=1

  order_card_ids.value=''
  checked1.value=true
  statusFang.value=0
  drawer.value = true;
  inputShow.value = false;
  form.value.start_progress = "";
  form.value.target_progress = "";
  form.value.current_progress = "";

  activeTab.value = index;
  wuliuSelect.value = false;
  typeName.value=false
  statusShow.value = false;
  startProgress.value = false;
  checkboxShow.value = false;
  console.log('退款类型',order_style.value)
  ids.value = e.id;
  let parm = {
    id: e.id,
    page: 99,
    limit: 1,
  };
  tableData.value=[]
    getOrderCardInfo(parm).then((res) => {
      console.log("获取开口", res);
   
      if( res.data.data){
        tableData.value = res.data.data;
        if(tableData.value.length>0){
        disabledShow3.value = true
        console.log("获取开口disabledShow3", disabledShow3.value);
      }else{

      }
      }
     
    });
  getOrderDetail({ id: ids.value }).then((res) => {
    console.log(res, "获取详情", res.data.order.status);
    disabledShow2.value = false
    form.value = res.data.order;
    form.value.status = res.data.order.status;
    form.value.backmoney_part = res.data.order_refund.backmoney_part
    form2.value.backmoney_part = res.data.order_refund.backmoney_part
    statusFang.value = parseInt(form.value.status);
    statusFangcc.value = parseInt(form.value.status);
    form.value.backmoney_type = res.data.order_refund.backmoney_type
    form2.value.backmoney_type = res.data.order_refund.backmoney_type
    if (res.data.order.validdate_value == 0) {
      goodstypeNamesShow.value = true;
    } else {
      goodstypeNamesShow.value = false;
    }
    //订单判断
    console.log("测试1111111", form.value.status);
    if (form.value.status == 1 || form.value.status == 2) {
      zanwuShow.value = true;
      statusShow.value = true;
      if (res.data.order.goods_type == 3) {
        wuliuSelect.value = true;
        startProgress.value = false;
      
        console.log("den");
      } else {
        startProgress.value = true;

        console.log("不等于3走的路线");
      }
    } else if (form.value.status == 5 || form.value.status == 3) {
      zanwuShow.value = true;
      console.log("dfdfdfdfdfdf", res.data.order.goods_type);
      if (
        res.data.order.goods_type == 1 
     
      ) {
        console.log("禁用");
        disabledShow.value = false;
    

      } else {
        disabledShow.value = true;
       
        console.log("启用");
      }
      goodstypeName.value = res.data.order.goods_type;
      startProgress.value = true;
      if (res.data.order.is_fail == 0) {
        checkboxShow.value = true;
      }
      inputShow.value = true;
    } else {
      zanwuShow.value = false;
    }

    orderObj.value = {};
    ordersn.value = {};
    orderotherinfo.value = {};
    if (form.value.recharge_info == null) {
      rechargeinfos.value = [];
    } else {
      rechargeinfos.value = form.value.recharge_info;
    }
    console.log("获取数组", rechargeinfos.value);
    if (form.value) {
      orderObj.value = form.value;
      ordersn.value = res.data.order.ordersn;
    }
    if (res.data.order_other_info) {
      orderotherinfo.value = res.data.order_other_info;
      console.log("这是什么", orderotherinfo.value);
    }
    if (orderObj.value.goods_type == 1) {
      orderObj.value.goods_type = "卡密商品";
    } else if (orderObj.value.goods_type == 2) {
      orderObj.value.goods_type = "充值商品";
    } else if (orderObj.value.goods_type == 3) {
      orderObj.value.goods_type = "实物商品";
    }
    if (orderObj.value.status == 1) {
      orderObj.value.status = "正在处理";
    } else if (orderObj.value.status == 3) {
      orderObj.value.status = "交易成功";
    } else if (orderObj.value.status == 2) {
      orderObj.value.status = "正在处理";
    } else if (orderObj.value.status == 0) {
      orderObj.value.status = "等待支付";
    } else if (orderObj.value.status == 4) {
      orderObj.value.status = "交易失败";
    } else if (orderObj.value.status == 5) {
      orderObj.value.status = "已成功退款";
    }
  });
    console.log('index,',index)
  if (index == 1) {
    //订单处理界面渲染
    orderStatusChangeBefore({ id: ids.value }).then((res) => {
      console.log("处理结果", res);
      allfieldlist.value = res.data.all_field_list;
      statuss.value = res.data.order.status;
    });
    tableData.value=[]
    getOrderCardInfo(parm).then((res) => {
      console.log("获取开口", res);
      tableData.value = res.data.data;
      if(tableData.value.length>0){
        disabledShow3.value = true
        console.log("获取开口disabledShow3", disabledShow3.value);
      }
    });

  } else if (index == 0) {
    //获取详情
    orderStatusChangeBefore({ id: ids.value }).then((res) => {
      console.log("处理结果", res);
      allfieldlist.value = res.data.all_field_list;
      statuss.value = res.data.order.status;
    });
  } else if (index == 3) {
    //订单明细
    orderMemberMoney(parm).then((res) => {
      tableData3.value = res.data.data;
     
    });
  } else if (index == 4) {
    //退款订单
    orderRefundList(parm).then((res) => {
      console.log(res);
      if (res.data) {
        tableData4.value = res.data.data;
      }
    });
  } else if (index == 5) {
    //销售明细
    orderAdmissionMon(parm).then((res) => {
      tableData5.value = res.data.data;
    });
  } else if (index == 6) {
    console.log('走这里对的啊')
    //劳务资金明细
    orderSupMoneyDetail(parm).then((res) => {
      console.log('获取订单明细',)
      tableData6.value = res.data.data;
    });
  }
}
const value = ref("");
const tabDate = ref([
  {
    indexs:'-1',
    name: "全部订单",
  },
  {
    name: "待支付",
    indexs:'0',
  },
  {
    name: "正在处理",
    indexs:'1',
  },
  {
    name: "交易处理",
    indexs:'2',
  },
  {
    name: "交易成功",
    indexs:'3',
  },
  {
    name: "交易失败",
    indexs:'4',
  },
  {
    name: "成功已退款",
    indexs:'5',
  },

 
]);
const options2 = [
  // {
  // 	value: '-1',
  // 	label: '购买订单号',
  // },
  {
    value: "1",
    label: "购买订单号",
  },
  {
    value: "2",
    label: "客户编号",
  },
  {
    value: "4",
    label: "供货商编号",
  },
  {
    value: "5",
    label: "充值账号",
  },
  {
    value: "6",
    label: "商品名称",
  },
  {
    value: "7",
    label: "订单ID",
  },
  {
    value: "8",
    label: "下单域名",
  },
  {
    value: "9",
    label: "物流单号",
  },
  {
    value: "10",
    label: "充值信息",
  },
  {
    value: "11",
    label: "卡号",
  },
  {
    value: "12",
    label: "卡密",
  },
];
const options = [
  {
    value: "0",
    label: "交易失败",
  },
  {
    value: "1",
    label: "正在交易",
  },

  {
    value: "3",
    label: "交易成功",
  },
  {
    value: "4",
    label: "交易失败",
  },
  {
    value: "5",
    label: "退款订单",
  },
];
const activeName = ref("first");
const dataList = ref([]);
// 添加响应式检测
const isMobile = ref(false);

const isBd = ref(1);
const nameShow = ref(false);
const passwords = ref("");
const paypassword = ref("");
const payuserid = ref("");
const usernametitle = ref("");
const channelTreeData = ref([]); // 渠道树形结构数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示数量
const total = ref(0); // 总记录数
const keyword = ref("");
const keytype = ref("");

const formInline = reactive({
  _key_word: "",
  _key_type: "",
  _status: "-1",
  supplier_id: "",
  docking_id: "",
  cost_price: "",
  face_price: "",
  _goods_from: "",
  _goods_type: "",
  _time_range: "",
  _end_time_range: "",
  price: "",
});
function handleIpClick(ip) {
  const url = `https://www.ip138.com/iplookup.php?ip=${encodeURIComponent(ip)}`;
  window.open(url, "_blank"); // 打开新标签页
}

//点击tab切换
function btnName(e,indexs) {
  names.value = e;
  formInline._status=indexs
  getSetdocking()
}
//点击电锯切换
function btnTable(e) {
  tabname.value = e;
}
function handleUpdateNode({ id, property, value }) {
  // 更新树数据中对应节点的属性
  const updateNode = (nodes) => {
    return nodes.map((node) => {
      if (node.id === id) {
        return { ...node, [property]: value };
      }
      if (node.list) {
        return { ...node, list: updateNode(node.list) };
      }
      return node;
    });
  };
  channelTreeData.value = updateNode(channelTreeData.value);
}

// 删除方法
const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定要删除这条记录吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 这里调用删除API
      delOrder({ id: id }).then(() => {
        ElMessage.success("删除成功");
        //fetchData(); // 刷新列表
        getSetdocking();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const submit = () => {
  AddDock(addform).then(() => {
    dialogVisible.value = false;
    handleQuery(); // 提交后刷新列表
  });
};
// 查询处理
const handleQuery = () => {
  currentPage.value = 1; // 重置为第一页
  getSetdocking();
};

// 重置查询条件
const handleReset = () => {
  formInline.user = "";
  handleQuery();
};
// 分页尺寸变化
const handlePageSizeChange = (size: number) => {
  pageSize.value = size;
  getSetdocking();
};

// 页码变化
const handleCurrentPageChange = (page: number) => {
  currentPage.value = page;
  getSetdocking();
};
onMounted(() => {
  getSetdocking();
  getDockSelectLists();
  getentityList();
});
//物流信息列表
function getentityList() {
  entityList().then((res) => {
    console.log("res", res);
    selectDate.value = res.data;
    console.log("物流列表", selectDate.value);
  });
}
//查询
function submitSee() {
  console.log("erer");
  getSetdocking();
}
function getFullInfoText(infoArray) {
  if (!Array.isArray(infoArray)) return "";

  // 过滤有效值并格式化为可读文本
  return infoArray
    .map((item) => {
      //const key = item.key?.trim() || "参数";
      const val = item.value?.toString() || "";
      return ` ${val}`;
    })
    .join("\n"); // 用换行符分隔每个条目
}

//列表
function getSetdocking() {
  // 显示 loading
  const loadingInstance = ElLoading.service({
    target: ".el-dialog", // 针对对话框区域
    lock: true,
    text: "正在加载数据中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  let parm = {
    page: currentPage.value,
    limit: pageSize.value,
    ...formInline,
  };
  getOrderList(parm)
    .then((res) => {
      if (res.code == 200) {
        dataList.value = res.data.data;
        console.log("获取的数据", dataList.value);
        if (res.data.data) {
          total.value = Number(res.data.count);
        }
        tabList.value[0].name = "所有订单" + Number(res.data.count);
        for (let item of dataList.value) {
          if (item.finish_time == 0) {
            item.finish_time = "-";
          }

          if (item.goods_type == "1") {
            item.goods_type = "卡密商品";
          } else if (item.goods_type == "2") {
            item.goods_type = "充值商品";
          } else if (item.goods_type == "3") {
            item.goods_type = "实物商品";
          } else if (item.goods_type == "4") {
            item.goods_type = "网课";
          }
          if (item.status == 0) {
            item.status = "未付款";
          } else if (item.status == 1) {
            item.status = "等待处理";
          } else if (item.status == 2) {
            item.status = "正在处理";
          } else if (item.status == 3) {
            item.status = "交易成功";
          } else if (item.status == 4) {
            item.status = "交易失败";
          } else if (item.status == 5) {
            item.status = "退款订单";
          }
        }
        console.log("获取的数据222", dataList.value);
      }
    })
    .finally(() => {
      // 数据加载完成后关闭 loading
      loadingInstance.close();
    });
}
</script>
<style>
.el-textarea__inner{
  width: 515px !important;
  height: 100px !important;
}


</style>
<style scoped>
.order-titme {
  
}

.iconss {
  color: #999;
  cursor: pointer;
  position: relative;
  top: 3px;
}

.iconss:hover {
  color: #1890ff;
}

.icons {
  font-size: 21px !important;
  position: relative !important;
  top: 18px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.icons2 {
  font-size: 50px !important;
  position: relative !important;
  top: 10px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.sanfang {
  margin-left: 12px;
  font-size: 11px;
  color: #1890ff;
  cursor: pointer;
}

.orders-names {
}

.order-names {
  display: flex;
  margin-top: 15px;
}

.order-information {
}

.order-detail {

  border-bottom: 1px solid #3333;
  margin-top: 10px;
  font-size: 13px;
  padding-bottom: 14px;
}

.activeTab {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.activeTabs {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.area-tab {
  display: flex;
  position: relative;
  left: -28px;
}
.area-tabs {
  height: 50vh;
  overflow: auto;
}

.area-name {
  margin-left: 30px;
  cursor: pointer;
  height: 31px;
}

.areas-header {
  height: 32px;
  border-bottom: 1px solid #3333;
  width: 100%;
}

.bianhao {
  margin-top: 16px;
  margin-left: 9px;
  font-size: 13px;
}

.right-name {
  margin-left: 8px;
}

.areas {
  width: 98%;
  margin: 0 auto;

  margin-top: 40px;
}

.quxiao {
  /* color: white;
		background-color: rgba(0, 0, 0, .65); */
  font-size: 12px;
  margin-top: 8px;
}

.type-name {
  margin-left: 150px;
}

.types {
  display: flex;
  margin-top: 30px;
  position: relative;
  left: -150px;
  font-size: 13px;
}

.imgsleft {
  width: 70px;
  height: 70px;
}

.img-left {
  width: 9%;
}

.img-content {
  margin-top: 12px;
  display: flex;
}

.contents-title {
  display: flex;
  margin-top: 14vh;
  justify-content: space-between;
}

.unbers {
  color: #1890ff;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  margin-left: 12px;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}

.ordername {
  color: #333;
  border: 1px solid #3333;
  border-color: #333;
  /* padding: 1px 9px 1px 9px; */
  margin-left: 12px;
  height: 22px;
  width: 56px;
  text-align: center;
  font-size: 11px;
  line-height: 22px;
}
.tutu{
  display: flex;
  width: 93%;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    cursor: pointer;
}
.kami {
  color: #13ce66;
  background-color: #e7faf0;
  border-color: #d0f5e0;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}
a {
  text-decoration: none;
  color: inherit;
}
.shu2 {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 25px;
  left: -8px;
}
.zhuangtai {
  display: flex;
  margin-top: 12px;
  font-size: 13px;
}
.imgs {
  width: 50px;
  height: 50px;
  position: relative;
  top: 4px;
  border-radius: 6px;
}

.table-name {
  background-color: #13ce66;
  color: white;
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  height: 23px;
  line-height: 23px;
}

.table-name2 {
  border-color: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 3px 5px 3px 9px;
  cursor: pointer;
}

.footerss {
  display: flex;
  width: 96%;
  margin: 0 auto;
  font-size: 13px;
}

.footers {
  width: 98%;
  border: 1px solid #3333;
  margin: 0 auto;
  height: 100px;
  margin-top: 25px;
}

.tabname {
  color: #409eff !important;
  border-bottom: 2px solid #409eff !important;
}

.tab-name {
  margin-left: 18px;
  cursor: pointer;
  height: 30px;
}
.inputs {
  width: 120px;
  margin-left: 12px;
}
.header-area {
  display: flex;
  position: relative;
  left: -18px;
  top: 1px;
}

.names {
  background: #409eff !important;
  color: white !important;
  border: none !important;
}

.jiaoyi {
  background-color: #13ce66;
}

.header-name {
  border-radius: 20px;
  padding: 3px 16px 3px 16px;
  border: 1px solid #9999;
  margin-left: 12px;
  font-size: 13px;
  cursor: pointer;
}

.headers {
  display: flex;
  padding-bottom: 12px;
}

.m-2 {
  width: 160px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.configurations {
  margin-top: 12px;
}

.configuration-area {
}

.dialog-footer {
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
}

.orders-name {
  margin-top: 12px;
}

.orders {
  margin-left: 12px;
}

.order-area {
  width: 98%;
  padding-bottom: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
}
.zanwu {
  display: flex;
  justify-content: center;
  position: relative;
  top: 25vh;
}
.tabs-area {
  margin-top: 12px;
}
.he {
  margin-left: 12px;
  color: #1890ff;
  cursor: pointer;
}
.diolog-content {
}

.shu {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 19px;
}

.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tabs-price {
  border: 1px solid #3333;
  padding: 5px 12px 3px 12px;
}

.timeShow {
  color: red !important;
}

.tabs {
  margin-left: 10px;
}

.tab-header {
  display: flex;
  width: 100%;
}
.info-area {
  display: flex;
  white-space: nowrap;
  width: 88%;

  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;

  cursor: pointer;
}
.info-area2 {
}
.info-area:hover {
  color: #1890ff;
}
.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;
}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}

/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}

/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
</style>
